<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich"
	xmlns:h="http://java.sun.com/jsf/html"
	template="/layout/plainTemplate.xhtml">


	<ui:define name="body">
		<div class="wrap" style="padding-top: 33px;">
			<div class="header">
				<!-- Logo -->

				<h1 class="logo">
					<!-- Image Logo -->
					<a title="Novus" href=""> <img
						alt="Novus"
						src="../img/logo1.png" /> </a>
				</h1>
			</div>
		</div>

		<div class="top-boxes">
			<div class="box box-1">
				<img alt="Great Design" src="../img/design.png" />
				<h1>
					<a href="#">Great Design</a>
				</h1>
				<p>Perfect design for taste of eye</p>
			</div>
			<div class="box box-2">
				<img alt="Easy to Use" src="../img/use.png" />
				<h1>Easy to Use</h1>
				<p>Very easy to use. Everything is clear</p>
			</div>
			<div class="box box-3">
				<img alt="It's a Gift. Take it" src="../img/gift.png" />
				<h1>
					<a href="#">It's a Gift. Take it</a>
				</h1>
				<p>It's a Gift. Take it. Free to use</p>
			</div>
		</div>
		<p:dialog id="dialog" modal="true" header="Login" showEffect="fade"
			hideEffect="fade" widgetVar="dlg">
			<h:form>
				<h:panelGrid columns="2" cellpadding="5">
					<h:outputLabel for="username" value="Username: *" />
					<h:inputText value="#{loginBean.user.userName}" id="username"
						required="true" requiredMessage="Username is reqiured"
						label="username" />

					<h:outputLabel for="password" value="Password: * " />
					<h:inputSecret value="#{loginBean.user.password}" id="password"
						required="true" requiredMessage="Password is reqiured"
						label="password" />

				</h:panelGrid>
				<div style="float: right; margin-right: 13px;">
					<p:commandButton styleClass="customBlueButton" value="Login"
						update="growl" ajax="false" action="#{loginBean.loginUser}" />
					<p:commandButton styleClass="customGreyButton" value="Cancel"
						type="button" onclick="dlg.hide()" />
				</div>
			</h:form>
		</p:dialog>


		<p:dialog id="signUpDialog" modal="true" header="Sign-Up"
			showEffect="fadeIn" widgetVar="signUpDlg">
			<h:form>
				<h:panelGrid columns="2" cellpadding="5">
					<h:outputLabel for="username" value="First Name: *" />
					<h:inputText value="#{loginBean.user.userName}" id="username"
						required="true" label="username" />

					<h:outputLabel for="lastname" value="Last Name: *" />
					<h:inputText value="#{loginBean.user.lastName}" id="lastname"
						required="true" label="last name" />

					<h:outputLabel for="email" value="E-Mail: *" />
					<h:inputText value="#{loginBean.user.email}" id="email"
						required="true" label="e-mail" />

					<h:outputLabel for="password" value="Password: * " />
					<h:inputSecret value="#{loginBean.user.password}" id="password"
						required="true" label="password" />

				</h:panelGrid>

				<div style="float: right; margin-right: 13px;">
					<p:commandButton styleClass="customBlueButton" value="Register"
						update="growl" ajax="false" action="#{loginBean.registerUser}" />
					<p:commandButton type="button" styleClass="customGreyButton"
						value="Cancel" onclick="signUpDlg.hide()" />
				</div>
			</h:form>
		</p:dialog>
	</ui:define>
</ui:composition>